<template>
    <div>
        <el-pagination background layout="prev, pager, next,sizes" :total="total" :current-page="currentPage"
            :page-size="pageSize" :page-sizes="pageSizes" size="small" @size-change="handleSizeChange" :pager-count="5"
            @current-change="handleCurrentChange" />
    </div>
</template>
<script setup>

defineProps({
    // 每页显示条目个数
    pageSize: {
        type: Number,
        default: 10,
        required: false
    },
    pageSizes: {
        type: Array,
        default: () => [5, 10, 15],
        required: false

    },
    // 当前页数
    currentPage: {
        type: Number,
        default: 1,
        required: false

    },
    total: {
        type: Number,
        default: 1,
        required: false

    }
})
const emit = defineEmits(['update:currentPage', 'update:pageSize'])
const handleCurrentChange = (val)=> {
    emit('update:currentPage', val)
}
const handleSizeChange = (size)=> {
    emit('update:pageSize', size)
}
</script>
<style scoped>
.xbsj-pagination {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;


}

:deep(.el-pagination.is-background .btn-next.is-active),
:deep(.el-pagination.is-background .btn-prev.is-active),
:deep(.el-pagination.is-background .el-pager li.is-active) {
    background-color: #676767 !important;
    color: var(--primary-white-color) !important;
}


:deep(.el-select__wrapper) {
  background-color: transparent;
}


</style>